import React, { Component } from "react";
import { Table, Select, Row, Col, Form, DatePicker } from "antd";
import { connect } from "dva";
import moment from "moment";
import styles from "./PushCount.less";

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const dateFormat = "YYYY/MM/DD";
const { Option } = Select;

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 }
};

const columns = [
  {
    title: "推送应用",
    dataIndex: "appName",
    width: "15%"
  },
  {
    title: "推送规则",
    dataIndex: "ruleName",
    width: "20%"
  },
  {
    title: "推送消息总数量",
    dataIndex: "totalAmount",
    width: "15%"
  },
  {
    title: "已读消息总数量",
    dataIndex: "readAmount",
    width: "15%"
  },
  {
    title: "点赞消息总数量",
    dataIndex: "praiseAmount",
    width: "15%"
  },
  {
    title: "推送失败消息总数量",
    dataIndex: "failAmount",
    width: "20%"
  }
];
// 查询
const handleSearch = (dispatch, values) => {
  let startTime;
  let endTime;
  const { time = [], appId, ruleId } = values;
  if (time.length > 0) {
    startTime = time[0].format(dateFormat);
    endTime = time[1].add(1, "days").format(dateFormat);
  }
  const payload = { appId, ruleId, startTime, endTime };
  dispatch({ type: "pushCount/getDataList", payload });
};

@connect(stores => ({
  pushCountData: stores.pushCount
}))
@Form.create({
  // 表单值发生改变时自动查询
  onValuesChange: (props, empty, allValues) => {
    handleSearch(props.dispatch, allValues);
  }
})
class pushCount extends Component {
  componentDidMount() {
    this.props.dispatch({
      type: "pushCount/getDataList",
      payload: {
        startTime: moment().format(dateFormat),
        endTime: moment()
          .add(1, "days")
          .format(dateFormat)
      }
    });
    this.props.dispatch({ type: "pushCount/getAppList" });
    this.props.dispatch({ type: "pushCount/getRuleList" });
  }

  // 列表分页发生改变
  handleTableChange = (pagination = {}) => {
    const { current: pageIndex, pageSize } = pagination;
    this.props.dispatch({
      type: "pushCount/set/filter",
      payload: { pageIndex, pageSize }
    });
    const values = this.props.form.getFieldsValue();
    handleSearch(this.props.dispatch, values);
  };

  render() {
    const { pushCountData } = this.props;
    const {
      appList = [],
      ruleList = [],
      dataList = [],
      totalCount,
      totalPage,
      filter
    } = pushCountData;
    // 获取应用列表并转化为选择项
    const appListOption = appList.map(item => (
      <Option key={item.appId}>{item.appName}</Option>
    ));
    // 获取规则列表并转化为选择项
    const ruleListOption = ruleList.map(item => (
      <Option key={item.ruleId}>{item.ruleName}</Option>
    ));
    const { getFieldDecorator } = this.props.form;
    return (
      <div className={styles.root}>
        <div className={styles.setDiv}>
          <span className={styles.title}>推送统计</span>
        </div>
        <Row>
          <Col span={8}>
            <FormItem {...formItemLayout} label="推送应用">
              {getFieldDecorator("appId", {
                rules: []
              })(
                <Select
                  placeholder="请选择推送应用"
                  style={{ width: "100%" }}
                  showSearch
                  allowClear
                  optionFilterProp="children"
                >
                  {appListOption}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="推送规则">
              {getFieldDecorator("ruleId", {
                rules: []
              })(
                <Select
                  placeholder="请选择推送应用"
                  style={{ width: "100%" }}
                  showSearch
                  allowClear
                  optionFilterProp="children"
                >
                  {ruleListOption}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem {...formItemLayout} label="时间范围">
              {getFieldDecorator("time", {
                initialValue: [moment(), moment()],
                rules: []
              })(<RangePicker format={dateFormat} onChange={this.onSearch} />)}
            </FormItem>
          </Col>
        </Row>
        <Table
          columns={columns}
          dataSource={dataList}
          rowKey="id"
          size="middle"
          onChange={this.handleTableChange}
          pagination={{
            total: totalCount,
            pageSize: filter.pageSize,
            current: filter.pageIndex,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: total =>
              `共 ${total} 条记录 第 ${filter.pageIndex}/ ${totalPage}页`
          }}
        />
      </div>
    );
  }
}

export default pushCount;
